Salve a tutti, prima di buttarsi a capofitto a scrivere codice io credo sia importante fare una panoramica sul quello che andremmo a fare oggi in questa guida:

1) prima di tutto vi farò vedere come si crea un sito con react e vite molto basilare

2) installeremo e configureremo tutte le dipendenze che ci servono e che andrò ad elencarvi successivamente

3) implementeremo e configureremo clerk

COME CREARE SITO BASE CON REACT E VITE

allora per incominciare a sviluppare con react bisogna avere installato sul proprio computer

1. node js
2. code editor
3. browser per vedere effettivamente le applicazioni

COME INSTALLARE NODE JS

quindi il primo passo che faremo sarà quello di recarci sul sito di node js e scaricare l'ultima versione la 23.3.0 o la LTS cioè l'ultima versione stabile e testata, quale versione scegliere è a vostra discrezione io solitamente utilizzo sempre la current, quindi recatevi su questo link:

Node.js — Download Node.js®

una volta installato node js ,cerchiamo nel nostro computer il prompt dei comandi e digitiamo il comando node -v e ci dovrebbe restituire la versione corretta del nostro node js se installato, se vi va in errore vuol dire che qualcosa è andata storto nell'installazione e dovrete provare a reinstallare node js.

Scelta ed installazione di un editor di codice:

dovremmo avere un editor di codice che ci permetta di importare il progetto, ci permette di editarlo e di farlo partire, io personalmente utilizzo cursor che però è a pagamento e che ho scoperto da poco, ma mi ci sto trovando veramente bene, ci sono sicuramente diverse opzioni oltre questa nel mercato sia a pagamento che non, per esempio i prodotti della suite di jetbrains, l'editor di codice gratis di vs code che è anche il mio vecchio editor di codice prima che conoscessi cursor e tante altre soluzioni dove ognuna vale l'altra dipende con quale vi trovate meglio, per esempio io sono passato da visual studio code a cursor nonostante con vs code io mi ci trovassi benissimo perchè cursor implementa la stessa interfaccia di vs code essendo basato su quest'ultimo ma lo migliora inserendo diverse feature riguardanti l'intelligenza artificiale, se volete avere un approfondimento andate sulla loro pagina: Cursor - The AI Code Editor, ovviamente magari ci stanno soluzioni anche gratuite che riescono a raggiungere lo stesso risultato che mi da cursor a livello di esperienza d'uso però sono disposto a spendere 10 euro al mese considerando l'enorme aiuto che mi da nel mio flusso di sviluppo del codice.

Scelta ed installazione di un browser

Allora io solitamente utilizzo microsoft edge però anche il browser è a vostra totale discrezione quale utilizzare, io ne ho testati di diversi dai più classici google chrome, firefox e microsoft edge fino a arc il nuovo browser di the browser company e ora sto cercando nuovi browser da testare però al momento utilizzo microsoft edge.

Creazione pagina react con vite

Allora per creare una pagina react apriamo il nostro editor di codice e nel nostro terminale digitiamo quanto segue:

1.   npm create vite@latest nome-del-tuo-progetto -- --template react-ts
2. cd nome-del-tuo-progetto
3. eseguire il comando npm install o yarn install, che servirà a installare tutte le dipendenze iniziali del pacchetto e creare la cartella node_modules dove appunto ci sono tutte le cartelle delle dipendenze
4. se vogliamo startare il progetto lanciamo yarn dev o npm run dev e poi seguiamo il link che esce sotto nel terminale

bene ora che abbiamo capito come si crea una pagina react di base con vite, io passerei all'installazione e alla configurazione di tutte le dipendenze.

INSTALLAZIONE DIPENDENZE E CONFIGURAZIONE

per far funzionare l'applicativo c'è bisogno di installare tre dipendenze, lanciate questo commando per installare tutte le dipendenze:

npm install @ant-design/icons antd @clerk/clerk-react sweetalert2 react-router-dom

yarn add @ant-design/icons antd @clerk/clerk-react sweetalert2 react-router-dom

Installazione e configurazione tailwind

npm install -D tailwindcss

npx tailwindcss init

questi due comandi che vanno lanciati in successione permettono di installare la dipendenza di tailwind quel meno -D significa che sara una dev dependencies e il secondo comanda invece ci farà generare il file tailwind.config.js che dopo vedremmo a cosa serve e come lo dovremmo modificare, ora andiamo a modificare prima di tutto il nostro file index.css e aggiungiamo le direttive tailwind:

successivamente andiamo a vedere cosa aggiungere nel nostro file tailwind.config.css:

Allora dentro content va aggiunto tutte le cartelle e file che andranno ad utilizzare tailwind quindi nel mio caso, tutte le pagine e tutti i componenti a me stanno dentro src visto che l'app è fatta con react, se fosse stata fatta con next js per esempio vedremmo magari dentro content più cartelle poichè come vengono gestite le pagine è diverso.

andiamo a vedere cosa significa quel comando "./src/**/*.{js,ts,jsx,tsx}", allora il comando di prima significa che si potrà utilizzare tailwind in tutte le cartelle di primo e secondo livello sotto src, quindi se hai una cartella sotto src tailwind funzionerà, se hai una cartella dentro un'altra cartella sotto src funzionerà, da questo punto in poi cioè dal terzo livello almeno che non gli è lo indichiamo non prenderà più tailwind, quello dentro le parentesi graffe invece indica tutte le estensioni di file con cui tailwind funzionerà.

Come Costruire una pagina basilare in react e tailwind di sign in e sign up

Allora prima di tutto apriamo la cartella src e poi solitamente io faccio questa divisione:

ovviamente le cartelle variano in base alle dipendenze che si hanno, per esempio se si avrà redux ci sarà una cartella in cui ci sarà store e le varie slice.

Modifica pagina App.tsx:

import { Route, Routes } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'
import './App.css'
import Login from './page/login'
import Signup from './page/signup'
import ForgotPasswordPage from './page/recover-password/recover-password'
// import { SignIn, SignUp } from '@clerk/clerk-react'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/forget-password" element={<ForgotPasswordPage />} />
        <Route path="*" element={<p>no page</p>} />
      </Routes>
    </BrowserRouter>
  )
}


export default App

allora qui tramite react router si gestiscono le rotte e quindi la navigazione dell'applicazione, come potete vedere si hanno diverse rotte, la prima rotta con il path "/" sarebbe la homepage quindi la prima pagina che l'utente visiterà in questo caso c'è direttamente la pagina di login, ma solitamente si trova la protectedRoutes ovvero la pagina sul quale si vede se sei già loggato nell'applicazione e se lo sei ti rimanda alla homepage se no ti rimanda alla pagina di login, dopo ci sono altre rotte che rappresentano le altre pagine del nostro sito, e poi come potete vedere abbiamo una pagina in particolare molto interessante ovvero quella pagina con

"*" e che rappresenta la pagina verso il quale si reindirizza ogni qual volta capita un errore a livello di rotte quindi per esempio quando non si trova una rotta perchè si digita male l'url.